<template>
  <div class="Menu">
    <a-menu
      :class="['menulist']"
      v-if="menuList.length"
      theme="dark"
      :selectedKeys="[$route.meta.parent || $route.path]"
      :openKeys="openKeysSelect"
      mode="inline"
      :inline-collapsed="collapsed"
      @openChange="onOpenChange"
    >
      <!-- subMenuClick -->
      <!-- 菜单遍历的开始 -->
      <template v-for="item in menuList">
        <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
        <a-menu-item @click="subMenuClick(item)" class="parent" v-if="!item.children" :key="item.path">
          <a-icon v-if="item.picUrl" :type="item.picUrl" />
          <span class="small">{{ item.meta.title }}</span>
        </a-menu-item>
        <template v-else>
          <!-- v-if="menuInfo.children && menuInfo.children.filter(e => {return e.meta && e.meta.hidden != 1}).length" -->
          <MenuChild
            :pathKeys="openKeysSelect"
            :key="item.path"
            index="1"
            :menu-info="item"
            :keys="item.path" />
        </template>
        <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->

      </template>
    </a-menu>
  </div>
</template>

<script>
import { mixin } from './assets/mixin';
import MenuChild from './MenuChild';
import { constantRouterMap } from '@/config/router.config.js';

export default {
  name: 'Menu',
  mixins: [mixin],
  props: {
    type: {
      default: 1,
      type: Number
    },
    menus: {
      default: () => {
        return [];
      },
      type: Array
    },
    defaualtKey: {
      default: () => {
        return [];
      },
      type: Array
    },
    menuTree: {
      default: () => {
        return [];
      },
      type: Array
    }
  },
  data() {
    return {
      menuList: []
    };
  },
  template: '<a-icon :component="MessageSvg" />',
  components: {
    MenuChild
  },
  computed: {
  },

  created() {
    this.setMenus();
  },
  methods: {
    setMenus() {
      console.log('setMenus');
      const menu = JSON.parse(JSON.stringify(constantRouterMap[1].children));
      this.setSelectMenu(this.$route);
      const newMenu = this.deleteHiddenMenu(menu);
      const that = this;
      this.$set(that, 'menuList', newMenu);

      this.openKeysSelect = this.$ss.get('openKeysSelect') || [menu[0].path];
      this.$ss.set('openKeysSelect', this.openKeysSelect);
    }
  }

};
</script>

<style lang="less">
  @import url('./assets/index.less');
</style>
